﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>PetShop</title>
    <link href="semantic/packaged/css/semantic.css" rel="stylesheet" type="text/css" />
    <link href="Themes/global.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>
    <script src="semantic/packaged/javascript/semantic.js" type="text/javascript"></script>
    <script src="Scripts/Welcome.js" type="text/javascript"></script>
	<script type="text/javascript">
			$(document).ready(function(){
				$('.demo.menu .item').tab({history:false});
			});
		</script>
</head>
<body>
    <div class="main container">
    <!--Top navigation bar-->
    <div id="topBar" class="topBar">
        <div class="floatRight">
            <div class="ui icon input">
              <input type="text" placeholder="Search...">
              <i class="search icon"></i>
            </div>
            <div id="loginDiv" class="ui label" onclick="javascript:showLoginModal();">
              <i class="user icon iconAnimation"></i>anonymous
            </div>
            <a href="CarritoCompras.htm"><i class="cart icon iconAnimation"></i></a>
        </div>
    </div>

    <!-- Header bar -->
    <div id="headerBar" class="headerBar">
         <a href="Welcome.htm"> <img class="ui logo rounded image" src="Images/logo.jpg" > </a>
        <div class="floatRight rightHeaderRail">
            <div class="floatRight">
                <span>Síguenos en</span> 
                <i class="facebook icon big iconAnimation"></i>
                <i class="twitter icon big iconAnimation"></i>
            </div>
            <div class="ui purple inverted menu">
                <div class="active ui dropdown item">
                    Mascotas<i class="dropdown icon"></i>
                    <div class="menu">
                            <a class="item" href="ProductGallery.htm?galleryType=1">Perros</a> <a class="item" href="ProductGallery.htm?galleryType=2">Gatos</a> <a
                                class="item" href="ProductGallery.htm?galleryType=3">Conejos</a>
                        </div>
                </div>          
				<div class="active ui dropdown item">
                    Productos<i class="dropdown icon"></i>
                    <div class="menu">
                        <a class="item">Collares</a>
                        <a class="item">Alimento</a>
                        <a class="item">Juguetes</a>
                    </div>
				 </div>    
               <a class="item" href="Contact.htm">Contacto</a>                
            </div>
        </div>
    </div>
	
    <!-- Main content place holder -->	
	 <div class="ui tertiary form segment mainPlaceholder">
	<div class="ui breadcrumb">
                        <a class="section" href="Welcome.htm">Home</a> <i class="right arrow icon divider"></i><a class="section" href="CarritoCompras.htm">
                            Carrito de compras</a> <i class="right arrow icon divider"></i>
                    </div>
	<div class="ui pointing secondary demo menu">
			<a class="active red item" data-tab="first">Lista de compras</a>
			<a class="blue item" data-tab="second">Dirección</a>
			<a class="black item" data-tab="third">Envio</a>
			<a class="green item" data-tab="four">Pago</a>
		  </div>
	
	    <div class="ui active tab segment" data-tab="first">
		
		<table class="ui table segment">
			  <thead>
				<tr><th>Producto</th>
				<th>Raza</th>
				<th>Precio</th>
				<th>Cantidad</th>
			  </tr></thead>
			  <tbody>
				<tr>
				  <td><img class="ui avatar image" src="Images/avatar.jpg"></td>
				  <td>Snickerdoodle</td>
				  <td>$120</td>
				  <td>	
					<div class="ui compact menu">
					  <div class="ui simple dropdown item">
						0 <i class="dropdown icon"></i>
						<div class="menu">
						  <div class="item">1</div>
						  <div class="item">2</div>
						  <div class="item">3</div>
						</div>
					  </div>
					</div>
					</td>
				</tr>
				<tr>
				  <td><img class="ui avatar image" src="Images/avatar2.jpg"></td>
				  <td>Poodle</td>
				  <td>$120</td>
				  <td>	
					<div class="ui compact menu">
					  <div class="ui simple dropdown item">
						0 <i class="dropdown icon"></i>
						<div class="menu">
						  <div class="item">1</div>
						  <div class="item">2</div>
						  <div class="item">3</div>
						</div>
					  </div>
					</div>
					</td>
				</tr>
			  </tbody>
			  <tfoot>
				<tr><th colspan="4">
				  <div class="ui blue labeled icon button"><i class="user icon"></i> Agregar productos</div>
				</th>
			  </tr></tfoot>
			</table>		
		</div>
		<!-- Fin del primer tab-->
		  <div class="ui tab segment" data-tab="second">
		  
		  <div class="ui form segment">
				  <div class="two fields">
					<div class="field">
					  <label>Nombre</label>
					  <input placeholder="Nombre" name="first-name" type="text">
					</div>
					<div class="field">
					  <label>Apellidos</label>
					  <input placeholder="Apellidos" name="last-name" type="text">
					</div>
				  </div>
				  <div class="field">
					<label>Correo</label>
					<input placeholder="Correo" name="username" type="text">
				  </div>
				  <div class="field">
					<label>Contraseña</label>
					<input placeholder="Contraseña" name="Contraseña" type="text">
				  </div>
				  <div class="field">
					<label>Repita contraseña</label>
					<input placeholder="Contraseña" name="Contraseña" type="text">
				  </div>
				</div>
		  </div>
		  <!-- Fin del Segundo tab-->
		  <div class="ui tab segment" data-tab="third">
		  <div class="ui form segment">
				  <div class="two fields">
					<div class="field">
					  <label>Nombre</label>
					  <input placeholder="Nombre" name="first-name" type="text">
					</div>
					<div class="field">
					  <label>Apellidos</label>
					  <input placeholder="Apellidos" name="last-name" type="text">
					</div>
				  </div>
				  <div class="field">
					<label>Correo</label>
					<input placeholder="Correo" name="username" type="text">
				  </div>
				  <div class="field">
					<label>Dirección</label>
					<textarea name="comment" form="usrform"></textarea>
				  </div>
				   <div class="inline field">
					<div class="ui checkbox">
					  <input name="terms" type="checkbox">
					  <label>Desea entrega inmediata</label>
					</div>
				  </div>
				</div>
		  </div>
		  <!-- Fin del tercer tab-->
		  <div class="ui tab segment" data-tab="four">
		  <div class="ui form segment">
				  <div class="two fields">
					<div class="field">
					  <label>Tipo de tarjeta</label>					 
						<div class="ui compact menu">
						  <div class="ui simple dropdown item">
							Tipo de tarjeta <i class="dropdown icon"></i>
							<div class="menu">
							  <div class="item">Visa</div>
							  <div class="item">Master Card</div>
							</div>
						  </div>
						</div>
					</div>
					<div class="field">
					  <label>Numero de Tarjeta</label>
					  <input placeholder="Numero de Tarjeta" name="last-name" type="text">
					</div>
				  </div>
				  <div class="field">
					<label>Fecha de vencimiento</label>
						<div class="ui compact menu">
						  <div class="ui simple dropdown item">
							Dia <i class="dropdown icon"></i>
							<div class="menu">
							  <div class="item">1</div>
							  <div class="item">2</div>
							  <div class="item">3</div>
							  <div class="item">4</div>
							  <div class="item">5</div>
							  <div class="item">6</div>
							  <div class="item">7</div>
							  <div class="item">8</div>
							  <div class="item">9</div>
							  <div class="item">10</div>
							  <div class="item">11</div>
							  <div class="item">12</div>
							  <div class="item">13</div>
							  <div class="item">14</div>
							  <div class="item">15</div>
							  <div class="item">16</div>
							  <div class="item">17</div>
							  <div class="item">18</div>
							  <div class="item">19</div>
							  <div class="item">20</div>
							  <div class="item">21</div>
							  <div class="item">22</div>
							  <div class="item">23</div>
							  <div class="item">24</div>
							  <div class="item">25</div>
							  <div class="item">26</div>
							  <div class="item">27</div>
							  <div class="item">28</div>
							  <div class="item">29</div>
							  <div class="item">30</div>
							  <div class="item">31</div>
							</div>
						  </div>
						  <div class="ui simple dropdown item">
							Mes <i class="dropdown icon"></i>
							<div class="menu">
							  <div class="item">Enero</div>
							  <div class="item">Febrero</div>
							  <div class="item">Marzo</div>
							  <div class="item">Abril</div>
							  <div class="item">Mayo</div>
							  <div class="item">Junio</div>
							  <div class="item">Julio</div>
							  <div class="item">Agosto</div>
							  <div class="item">Setiembre</div>
							  <div class="item">Octubre</div>
							  <div class="item">Noviembre</div>
							  <div class="item">Diciembre</div>
							</div>
						  </div>
						</div>
				  </div>	  
				  <div class="ui blue submit button">Finalizar</div>
				</div>
		  </div>
			<!-- Fin del cuarto tab-->
  </div>
    <!-- Footer -->
        <div class="footer customBorderFooter">
            <div class="ui horizontal list customPagination">
                <div class="item customFooterFontText customFooterColMargin">
                    Servicio al Cliente
                    <div class="ui inverted link list">
                        <a class="item customFooterSubtitleFontText">Politícas</a> <a class="item customFooterSubtitleFontText">
                            Preguntas Frecuentes</a>
                    </div>
                </div>
                <div class="item customFooterFontText customFooterColMargin">
                    Formas de Pago
                    <div class="ui inverted link list">
                        <a class="item customFooterSubtitleFontText">Tarjetas</a> <a class="item customFooterSubtitleFontText">
                            Pago contra entrega</a>
                    </div>
                </div>
                <div class="item customFooterFontText">
                    Contáctenos
                    <div class="ui inverted link list">
                        <a class="item customFooterSubtitleFontText linkFontStyleNormal" href="Contact.htm">
                            Nos puedes contactar</a> <a class="item customFooterSubtitleFontText linkFontStyleNormal"
                                href="Contact.htm">usando nuestro formulario</a>
                    </div>
                </div>
            </div>
        </div>
        <!-- Login modal-->
        <div class="ui login modal small">
            <i class="close icon"></i>
            <div class="header">
                Login
            </div>
            <div class="content">
                <div class="ui input" style="margin-bottom: 10px;">
                    <input type="text" placeholder="Username" />
                </div>
                <div class="ui input">
                    <input type="text" placeholder="Password" />
                </div>
            </div>
            <div class="actions">
                <div class="ui button">
                    Cancelar
                </div>
                <div class="ui button">
                    Ingresar
                </div>
            </div>
        </div>
</body>
</html>
